<template>
  <div class="login">
    <LoginLeftView></LoginLeftView>

    <div class="right-wrap">
      <div class="top-right-wrap">
        <div v-if="shouldShowThemeToggle" class="btn theme-btn" @click="themeAnimation">
          <i class="iconfont-sys">
            {{ isDark ? '&#xe6b5;' : '&#xe725;' }}
          </i>
        </div>
        <ElDropdown v-if="shouldShowLanguage" @command="changeLanguage" popper-class="langDropDownStyle">
          <div class="btn language-btn">
            <i class="iconfont-sys icon-language">&#xe611;</i>
          </div>
          <template #dropdown>
            <ElDropdownMenu>
              <div v-for="lang in languageOptions" :key="lang.value" class="lang-btn-item">
                <ElDropdownItem :command="lang.value" :class="{ 'is-selected': locale === lang.value }">
                  <span class="menu-txt">{{ lang.label }}</span>
                  <i v-if="locale === lang.value" class="iconfont-sys icon-check">&#xe621;</i>
                </ElDropdownItem>
              </div>
            </ElDropdownMenu>
          </template>
        </ElDropdown>
      </div>
      <div class="header">
        <ArtLogo class="icon" />
        <h1>{{ systemName }}</h1>
      </div>
      <div class="login-wrap">
        <div class="form">
          <h3 class="title">{{ $t('login.title') }}</h3>
          <p class="sub-title">{{ $t('login.subTitle') }}</p>
          <ElForm ref="formRef" :model="formData" :rules="rules" @keyup.enter="handleSubmit" style="margin-top: 25px">
            <!-- <ElFormItem prop="account">
              <ElSelect v-model="formData.account" @change="setupAccount" class="account-select">
                <ElOption
                  v-for="account in accounts"
                  :key="account.key"
                  :label="account.label"
                  :value="account.key"
                >
                  <span>{{ account.label }}</span>
                </ElOption>
              </ElSelect>
            </ElFormItem> -->
            <ElFormItem prop="username">
              <ElInput :placeholder="$t('login.placeholder[0]')" v-model.trim="formData.username" />
            </ElFormItem>
            <ElFormItem prop="password">
              <ElInput :placeholder="$t('login.placeholder[1]')" v-model.trim="formData.password" type="password"
                radius="8px" autocomplete="off" show-password />
            </ElFormItem>
            <!-- <ElFormItem prop="code">
              <el-row :gutter="12" style="width: 100%">
                <el-col :span="countdown > 0 ? 17 : 18">
                  <ElInput v-model="formData.code" placeholder="请输入验证码" />
                </el-col>
                <el-col :span="countdown > 0 ? 7 : 6">
                  <el-button size="large" class="code" :disabled="countdown > 0"
                    @click="countdown === 0 && sendSmsCodeData()">
                    {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
                  </el-button>
                </el-col>
              </el-row>
            </ElFormItem> -->
            <!-- <div class="drag-verify">
              <div class="drag-verify-content" :class="{ error: !isPassing && isClickPass }">
                <ArtDragVerify
                  ref="dragVerify"
                  v-model:value="isPassing"
                  :text="$t('login.sliderText')"
                  textColor="var(--art-gray-800)"
                  :successText="$t('login.sliderSuccessText')"
                  :progressBarBg="getCssVar('--el-color-primary')"
                  background="var(--art-gray-200)"
                  handlerBg="var(--art-main-bg-color)"
                />
              </div>
              <p class="error-text" :class="{ 'show-error-text': !isPassing && isClickPass }">{{
                $t('login.placeholder[2]')
              }}</p>
            </div> -->

            <div class="forget-password">
              <ElCheckbox v-model="formData.rememberPassword">{{
                $t('login.rememberPwd')
              }}</ElCheckbox>
              <!-- <RouterLink :to="RoutesAlias.ForgetPassword">{{ $t('login.forgetPwd') }}</RouterLink> -->
            </div>

            <div style="margin-top: 30px">
              <ElButton class="login-btn" type="primary" @click="handleSubmit" :loading="loading" v-ripple>
                {{ $t('login.btnText') }}
              </ElButton>
            </div>

            <!-- <div class="footer">
              <p>
                {{ $t('login.noAccount') }}
                <RouterLink :to="RoutesAlias.Register">{{ $t('login.register') }}</RouterLink>
              </p>
            </div> -->
          </ElForm>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import AppConfig from '@/config'
import { RoutesAlias } from '@/router/routesAlias'
import { useUserStore } from '@/store/modules/user'
import { getCssVar } from '@/utils/ui'
import { languageOptions } from '@/locales'
import { LanguageEnum } from '@/enums/appEnum'
import { useI18n } from 'vue-i18n'
import { HttpError } from '@/utils/http/error'
import { themeAnimation } from '@/utils/theme/animation'
import { fetchLogin, fetchGetUserInfo } from '@/api/auth'
import { useHeaderBar } from '@/composables/useHeaderBar'
import type { FormInstance, FormRules } from 'element-plus'
import { useSettingStore } from '@/store/modules/setting'
import { LoginMethod } from '@/api/LoginMethod'

defineOptions({ name: 'Login' })

const { t } = useI18n()

const countdown = ref(0)

type AccountKey = 'super' | 'admin' | 'user'

export interface Account {
  key: AccountKey
  label: string
  userName: string
  password: string
  roles: string[]
}

// const accounts = computed<Account[]>(() => [
//   {
//     key: 'super',
//     label: t('login.roles.super'),
//     userName: 'Super',
//     password: '123456',
//     roles: ['R_SUPER']
//   },
//   {
//     key: 'admin',
//     label: t('login.roles.admin'),
//     userName: 'Admin',
//     password: '123456',
//     roles: ['R_ADMIN']
//   },
//   {
//     key: 'user',
//     label: t('login.roles.user'),
//     userName: 'User',
//     password: '123456',
//     roles: ['R_USER']
//   }
// ])

const settingStore = useSettingStore()
const { isDark } = storeToRefs(settingStore)
const { shouldShowThemeToggle, shouldShowLanguage } = useHeaderBar()

const dragVerify = ref()

const userStore = useUserStore()
const router = useRouter()
const isPassing = ref(false)
const isClickPass = ref(false)

const systemName = AppConfig.systemInfo.name
const formRef = ref<FormInstance>()

const formData = reactive({
  account: '',
  username: '',
  password: '',
  rememberPassword: true,
  code: ''
})

const rules = computed<FormRules>(() => ({
  username: [{ required: true, message: t('login.placeholder[0]'), trigger: 'blur' }],
  password: [{ required: true, message: t('login.placeholder[1]'), trigger: 'blur' }],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
}))

const loading = ref(false)

// onMounted(() => {
//   setupAccount('super')
// })

async function sendSmsCodeData() {
  try {
    if (!formData.username) {
      ElMessage.error('请输入手机号')
      return
    }
    countdown.value = 60
    const timer = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(timer)
      }
    }, 1000)
    const paramsObj = {
      mobile: formData.username
    }
    const { code, msg } = await LoginMethod.sendSmsCode(paramsObj)
    console.log(code, msg, "12321");

    if (code === '0') {
      ElMessage.success('发送成功')
    } else {
      ElMessage.error(msg)
    }
  } catch (e) {
  } finally {
  }
}

// 设置账号
// const setupAccount = (key: AccountKey) => {
//   const selectedAccount = accounts.value.find((account: Account) => account.key === key)
//   formData.account = key
//   formData.username = selectedAccount?.userName ?? ''
//   formData.password = selectedAccount?.password ?? ''
// }

// 登录
const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    // 表单验证
    const valid = await formRef.value.validate()
    if (!valid) return

    // 拖拽验证
    // if (!isPassing.value) {
    //   isClickPass.value = true
    //   return
    // }

    loading.value = true

    // 登录请求
    const { username, code, password } = formData
    //验证码
    // const res = await LoginMethod.smsCodeLogin({
    //   mobile: username,
    //   code
    // })

    // 密码登录
    // const { accessToken, refreshToken } = await LoginMethod.Login({
    //   mobile: username,
    //   password
    // })
    const res = await LoginMethod.Login({
      mobile: username,
      password
    })

    const { accessToken, refreshToken } = res.data

    // 验证token
    if (!accessToken) {
      throw new Error('Login failed - no token received')
    }

    // 存储token和用户信息
    userStore.setToken(accessToken, refreshToken)
    const userInfo: any = await LoginMethod.getUserInfo()
    userStore.setUserInfo(userInfo.data)
    userStore.setLoginStatus(true)
    // 登录成功处理
    showLoginSuccessNotice()
    router.push('/dashboard/console')
  } catch (error) {
    // 处理 HttpError
    if (error instanceof HttpError) {
      // console.log(error.code)
    } else {
      // 处理非 HttpError
      ElMessage.error('登录失败，请稍后重试')
    }
  } finally {
    loading.value = false
    // resetDragVerify()
  }
}

// 重置拖拽验证
// const resetDragVerify = () => {
//   dragVerify.value.reset()
// }

// 登录成功提示
const showLoginSuccessNotice = () => {
  setTimeout(() => {
    ElNotification({
      title: t('login.success.title'),
      type: 'success',
      duration: 2500,
      zIndex: 10000,
      message: `${t('login.success.message')}, ${systemName}!`
    })
  }, 150)
}

// 切换语言
const { locale } = useI18n()

const changeLanguage = (lang: LanguageEnum) => {
  if (locale.value === lang) return
  locale.value = lang
  userStore.setLanguage(lang)
}
</script>

<style lang="scss" scoped>
@use './index';
</style>
